<template>
  <el-main>
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card style="margin-bottom:20px;">
          <div slot="header" class="clearfix">
            <h6> My Introduction</h6>
          </div>
          <div class="user-profile">
            <div class="box-center">
              <el-avatar shape="square" :height="'100px'" :width="'100px'" :size="100" :src="user.userAvatar"></el-avatar>
            </div>
            <div class="box-center">
              <div class="user-name text-center">{{ user.userNickname }}</div>
            </div>
          </div>

          <div class="user-bio">
            <div class="user-information user-bio-section">
              <div class="user-bio-section-header">

                <h6> <i class="el-icon-star-on"></i>Information</h6>
              </div>
              <div class="user-bio-section-body">
                <div> <i class="el-icon-phone"></i> telephone: {{user.userPhone}} </div>
                <div> <i class="el-icon-message"></i> email：{{user.userEmail}} </div>
              </div>
            </div>

            <div class="user-skills user-bio-section">

              <div class="user-bio-section-body">
                <h6>  <i class="el-icon-coffee"></i>Skills</h6>
                <el-tag v-for="item in user.userSkill" :key="item.index">
                  {{item}}
                </el-tag>
              </div>
            </div>



          </div>
        </el-card>
      </el-col>

      <el-col :span="18" :xs="24">
        <el-card style="margin-bottom:20px;">

          <h1>Me</h1>
          <Experience></Experience>
        </el-card>
      </el-col>
    </el-row>
  </el-main>

</template>

<script>
import {introGet} from "@/api/intro";
import Experience from "@/views/intro/components/experience";

export default {
  name: "index",
  components: {Experience},
  data() {
    return {
      user: {
        userId: '',
        userLoginName: '',
        userNickname: '',
        userEmail: '',
        userPhone: '',
        userAvatar: '',
        userPassword: '',
        userStatus: '',
        userLoginIp: '',
        userLoginDate: '',
        userPwdUpdateDate: '',
        userInfoUpdateTime: '',
        userSkill: []
      }
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      introGet().then(res => {
        let data = res.data;
        this.user = {
          userId: data.userId,
          userLoginName: data.userLoginName,
          userNickname: data.userNickname,
          userEmail: data.userEmail,
          userPhone: data.userPhone,
          userAvatar: data.userAvatar,
          userLoginDate: data.userLoginDate,
          userSkill: JSON.parse(data.userSkill)
        }
        console.log(this.user)
      })
    }
  }
}
</script>


<style lang="scss" scoped>
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 10px;
  }

  .user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user-follow {
    padding-top: 20px;
  }
}

.user-bio {
  margin-top: 20px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 15px 0;

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
.personal-relation {
  font-size: 16px;
  padding: 0px 5px 15px;
  margin-right: 1px;
  width: 100%
}
.relation-item {
  padding: 3px;
}


</style>
